<ui:component xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:m="http://www.ol4jsf.org"
	xmlns:o="http://openfaces.org/"
	xmlns:a4j="http://richfaces.org/a4j">

	<script type="text/javascript">
		var lastPointFeature = null;
		
		function resetCoordInputs() {
			#{rich:element('pointYInput')}.value = '';
			#{rich:element('pointXInput')}.value = '';
		}
		function resetMethod1Inputs() {
			getPickSinglePointControl().deactivate();
			
			#{rich:element('pointYInput')}.value = '';
			#{rich:element('pointXInput')}.value = '';
		}
		
		function pickPoint() {
			getPickPointControl().deactivate();
			if (!getPickSinglePointControl().active) {
				getPickSinglePointControl().events.remove('featureadded');
				getPickSinglePointControl().events.register('featureadded', this, addedPoint);
				getPickSinglePointControl().activate();
			}
			else
				getPickSinglePointControl().deactivate();
		}
		function addedPoint(evt) {
			var pointFeature = evt.feature;
			var geom = pointFeature.geometry;
			var layer = pointFeature.layer;

			if (lastPointFeature != null)
				layer.destroyFeatures(lastPointFeature);
			
			lastPointFeature = pointFeature;

			#{rich:element('pointYInput')}.value = geom.y;
			#{rich:element('pointXInput')}.value = geom.x;
		}
	</script>
	
	<rich:toolBar height="20" itemSeparator="grid">
		<rich:toolBarGroup>
			<h:panelGroup>
				<o:commandButton type="button" onclick="addPointToBoundary()">
					<rich:toolTip followMouse="true" direction="bottom-right" showDelay="500" styleClass="tooltip">
						<span style="white-space:nowrap">
							Agregar punto
						</span>
					</rich:toolTip>
					<h:graphicImage value="/img/add-icon.png" />
				</o:commandButton>
				<o:commandButton type="button" onclick="deleteLastBoundaryPoint()">
					<rich:toolTip followMouse="true" direction="bottom-right" showDelay="500" styleClass="tooltip">
						<span style="white-space:nowrap">
							Borrar ultimo punto
						</span>
					</rich:toolTip>
					<h:graphicImage value="/img/delete-icon.png" />
				</o:commandButton>
				<o:commandButton type="button" onclick="clearBoundary()">
					<rich:toolTip followMouse="true" direction="bottom-right" showDelay="500" styleClass="tooltip">
						<span style="white-space:nowrap">
							Borrar todo
						</span>
					</rich:toolTip>
					<h:graphicImage value="/img/delete-all-icon.png" />
				</o:commandButton>
			</h:panelGroup>
		</rich:toolBarGroup>
		
		<rich:toolBarGroup location="right">
			<h:panelGroup>
				<o:commandButton type="button" onclick="uploadFileFun()">
					<h:graphicImage value="/img/edit.gif" />
					<rich:toolTip followMouse="true" direction="bottom-left" showDelay="500" styleClass="tooltip">
						<span style="white-space:nowrap">
							Dibujar desde archivo
						</span>
					</rich:toolTip>
				</o:commandButton>
				<o:commandButton type="button" onclick="drawBoundary();">
					<rich:toolTip followMouse="true" direction="bottom-left" showDelay="500" styleClass="tooltip">
						<span style="white-space:nowrap">
							Dibujar frontera
						</span>
					</rich:toolTip>
					<h:graphicImage value="/img/draw-icon.png" />
				</o:commandButton>
			</h:panelGroup>
		</rich:toolBarGroup>
	</rich:toolBar>

	<br />
		
	<h:form>
		<table style="width: 100%">
			<tr valign="top">
				<td style="width: 50%">
					<!-- Left column -->
					<table style="width: 100%">
						<tr>
							<th colspan="2" align="left">
								<table style="width: 100%">
									<tr>
										<td width="50%">
											<h:outputText value="Ingrese las coordenadas" />
										</td>
										<td align="right">
											<a href="#" onclick="pickPoint()">#{messages['button.select']}</a>
										</td>
									</tr>
								</table>
							</th>
						</tr>
						<tr>
							<td>
								<h:inputText id="pointYInput"
									value="#{interactiveViewerHelper.borderHelper.borderPoint.y}"
									style="width: 100%">
								</h:inputText>
							</td>
							<th>
								<rich:spacer/>
								<h:outputText value=" N" />
							</th>
						</tr>
						<tr>
							<td>
								<h:inputText id="pointXInput"
									value="#{interactiveViewerHelper.borderHelper.borderPoint.x}"
									style="width: 100%">
								</h:inputText>
							</td>
							<th>
								<rich:spacer/>
								<h:outputText value=" E" />
							</th>
						</tr>
					</table>
				</td>
				<td style="width: 50%">
					<!-- Right column -->
					<div align="center">
						<!-- Border coordinates table -->
						<div class="contentRights">
							<h:panelGroup id="coords">
								<h:panelGroup rendered="#{empty interactiveViewerHelper.borderHelper.currentBorder}">
									<br/>
									<h:outputText value="No se han ingresado puntos de la frontera" />
								</h:panelGroup>
								<h:panelGroup rendered="#{not empty interactiveViewerHelper.borderHelper.currentBorder}">
									<table>
										<tr>
											<th colspan="2">NORTE</th>
											<th colspan="2">ESTE</th>
										</tr>
										<ui:repeat var="coord" value="#{interactiveViewerHelper.borderHelper.currentBorder}">
											<tr>
												<td align="right">#{coord.y}</td>
												<th>N</th>
												<td align="right">#{coord.x}</td>
												<th>E</th>
											</tr>
										</ui:repeat>
									</table>
								</h:panelGroup>
							</h:panelGroup>
						</div>
						<br/>
					</div>
				</td>
			</tr>
		</table>
		
		<br/>
		
		<a4j:jsFunction name="addPointToBoundary"
			action="#{interactiveViewerHelper.borderHelper.addPointToBoundary}"
			process="pointYInput, pointXInput"
			reRender="drawBoundaryFunctions, coords, bearingAndDistanceTable"
			oncomplete="resetCoordInputs(); drawBoundaryReRender()">
		</a4j:jsFunction>
	</h:form>

</ui:component>
